<template>
  <div>
    <div class="user-base">
      <div class="base-img">
        <img :src="userInfo.via">
      </div>
      <div class="base-text">
        <H1 v-text="userInfo.nickname"></H1>
        <H2 v-text="userInfo.username"></H2>
        <p v-text="userInfo.email"></p>
        <p>
          <span>
            积分值:
            <span>{{userInfo.poi}}</span>
          </span>&nbsp;
          <span>
            经验值:
            <span>{{userInfo.exp}}</span>
          </span>
        </p>
        <p>
          <span>
            提交数:
            {{userInfo.submit_count}}
          </span>&nbsp;
          <span>
            正确数:
            <span style="color:green">{{userInfo.ac_count}}</span>
          </span>&nbsp;
          <span>
            正确率:
            <span style="">{{userInfo.ac_count/userInfo.submit_count*100}}</span>%
          </span>
        </p>
        <p v-text="userInfo.own_sign">这是一个非常牛逼的个性签名</p>
      </div>
      <div class="base-menu">
        <Dropdown>
          <Button shape="circle">
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem
              v-if="getUserRole.is_to_back"
              @click.native="$router.push({name:'AdminHome'})"
            >转到后台</DropdownItem>
            <DropdownItem>修改信息</DropdownItem>
            <DropdownItem @click.native="$router.push({name:'Login'})">退出登录</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
    </div>
    <Row :gutter="16">
      <Col span="6">
        <Card title="基本信息">
          <H4>用户名</H4>
          <p v-text="userInfo.username">admin</p>
          <Divider/>
          <H4>个性签名</H4>
          <p v-text="userInfo.own_sign">这是一个非常牛逼的，签名</p>
          <Divider/>
          <H4>Email</H4>
          <p v-text="userInfo.email">15804854160@163.com</p>
          <Divider/>
          <H4>Gitee</H4>
          <p v-text="userInfo.gitee_username">15804854160@163.com</p>
          <Divider/>
          <H4>注册时间</H4>
          <p v-text="userInfo.in_date">2019-01-09</p>
          <Divider/>
          <H4>上次登录</H4>
          <p v-text="userInfo.last_date">2019-01-09</p>
          <br>
        </Card>
      </Col>
      <Col span="12">
        <Card title="提交记录">
          <StatusPart :funs="funs" :ignored="[0,1]" :stripe="false" :filterOr="filterOr"></StatusPart>
        </Card>
        <br>
        <Card title="AC题目">
          <AcLogPart :userId="userInfo.user_id"></AcLogPart>
        </Card>
        <br>
        <Card title="比赛记录">
          <ContestLogPart :userId="userInfo.user_id"></ContestLogPart>
        </Card>
      </Col>
      <Col span="6">
        <Card title="统计">
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import ECharts from "_c/EChartsPart";
import StatusPart from "_c/StatusPart";
import AcLogPart from "_c/AcLogPart";
import ContestLogPart from "_c/ContestLogPart";
import { mapGetters } from "vuex";
import { empty } from "../libs/tools";
export default {
  name: "UserInfo",
  components: { ECharts, StatusPart, AcLogPart, ContestLogPart },
  data() {
    return {
      funs: {},
      userInfo: {},
      filterOr: [
        {
          field: "username",
          text: 0,
          is_like: 0
        }
      ]
    };
  },
  computed: {
    ...mapGetters(["getLoginInfo", "getUserRole"])
  },
  mounted() {
    this.funs.update();
    this.userInfo = this.getLoginInfo;
    if (!empty(this.$route.params)) {
      this.userInfo = this.$route.params;
    }

    this.filterOr[0] = {
      text: this.userInfo.username,
    };
  }
};
</script>

<style lang="less" scoped>
.user {
  &-base {
    height: 150px;
    display: flex;
    .base {
      &-text {
        margin: 0 10px;
        p {
          font-size: 0.8rem;
        }
      }
      &-img {
        height: 140px;
        width: 140px;
        overflow: hidden;
        background: #ddd;
        transition: 0.36s all;
        border-radius: 3px;
        img {
          height: 140px;
          transition: 0.36s all;
        }
        :hover {
          height: 160px;
        }
        &:hover {
          border-radius: 140px;
          box-shadow: #999 0 1px 3px 0px;
        }
      }
      &-menu {
        margin-left: auto;
      }
    }
  }
}
</style>